revision:
Click the toggle to switch between dark and light modes.
code:
<div id="frame">
<div class="container">
<p>Click the toggle to switch between dark and light modes.</p><br>
<div class="toggle-container" id="themeToggle">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</div>
</div>
<style>
:root {--clr-dark: #333; --clr-light: #fff; }
#frame{font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 50vh; width: 90vw; margin: 0; }
.container {text-align: center; width: 30vw;}
.dark-mode {background-color: var(--clr-dark); color: var(--clr-light);}
.toggle-container {cursor: pointer;}
.sun-icon, .moon-icon { width: 2vw; height: 2vw;transition: opacity 0.3s;}
.moon-icon {display: none;}
.dark-mode .sun-icon {display: none; }
.dark-mode .moon-icon {display: inline-block;}
</style>
<script>
const themeToggle = document.getElementById('themeToggle');
const body = document.getElementById("frame");
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark-mode');
} else {
localStorage.setItem('theme', '');
}
});
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
body.classList.add(currentTheme);
}
</script>
code:
<div id="frame-1" data-theme="dark">
<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="24" cy="10" r="6" fill="black" />
</mask>
<circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
<g class="sun-beams" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g>
</svg>
</button>
</div>
<style>
#frame-1{font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 50vh; width: 90vw; margin: 0;border:0.2vw solid black;}
.sun-and-moon > :is(.moon, .sun, .sun-beams) {transform-origin: center;}
.sun-and-moon > :is(.moon, .sun) {fill: var(--icon-fill);}
.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {fill: var(--icon-fill-hover);}
.sun-and-moon > .sun-beams { stroke: var(--icon-fill); stroke-width: 0.125vw;}
.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {stroke: var(--icon-fill-hover);}
[data-theme="dark"] .sun-and-moon > .sun {transform: scale(1.75);}
[data-theme="dark"] .sun-and-moon > .sun-beams {opacity: 0;}
[data-theme="dark"] .sun-and-moon > .moon > circle {transform: translateX(-0.4375vw);}
@supports (cx: 1) {
[data-theme="dark"] .sun-and-moon > .moon > circle { cx: 17; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.sun-and-moon > .sun {transition: transform .5s var(--ease-elastic-3);}
.sun-and-moon > .sun-beams {transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);}
.sun-and-moon .moon > circle {transition: transform .25s var(--ease-out-5);}
@supports (cx: 1) {
.sun-and-moon .moon > circle {transition: cx .25s var(--ease-out-5);}
}
[data-theme="dark"] .sun-and-moon > .sun {transition-timing-function: var(--ease-3); transition-duration: .25s; transform: scale(1.75); }
[data-theme="dark"] .sun-and-moon > .sun-beams {transition-duration: .15s; transform: rotateZ(-25deg);}
[data-theme="dark"] .sun-and-moon > .moon > circle {transition-duration: .5s;transition-delay: .25s; }
}
[data-theme="dark"]{background-color: var(--clr-dark); color: var(--clr-light);}
</style>
<script>
const storageKey = 'theme-preference'
const onClick = () => {
// flip current value
theme.value = theme.value === 'light' ? 'dark' : 'light'
setPreference()
}
const getColorPreference = () => {
if (localStorage.getItem(storageKey))
return localStorage.getItem(storageKey)
else
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setPreference = () => {
localStorage.setItem(storageKey, theme.value)
reflectPreference()
}
const reflectPreference = () => {
document.getElementById("frame-1").setAttribute('data-theme', theme.value)
document.querySelector('#theme-toggle') ?.setAttribute('aria-label', theme.value)
}
const theme = {
value: getColorPreference(),
}
// set early so no page flashes / CSS is made aware
reflectPreference()
window.onload = () => {
// set on load so screen readers can see latest value on the button
reflectPreference()
// now this script can find and listen for clicks on the control
document.querySelector('#theme-toggle').addEventListener('click', onClick)
}
// sync with system changes
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', ({matches:isDark}) => {
theme.value = isDark ? 'dark' : 'light'
setPreference()
})
</script>